<!-- 面对面上门订单 详情页 -->
<template>
	<view class="u-rela">
		<!-- 背景图片 -->
		<view class="ptp-detail-bg"><u-image width="100%" height="100%" :src="vuex_url + '/static/imgs/ptp-detail-bg.png'"></u-image></view>
		<!-- 主体文字内容区域 -->
		<view class="ptp-detail-text-box">
			<u-icon name="list" size="30" color="#D5D6DA"></u-icon>

			<!-- 圆形图标和文字提示区域 -->
			<view class="top-tip-box">
				<view class="icon-box" style="background-color: #F10000;" v-if="orderData.status === -1"><u-icon name="close" size="20" color="#FFF"></u-icon></view>
				<view class="icon-box" :style="{ backgroundColor: orderData.status === 3 ? '#39D94E' : '#FDB145' }" v-else>
					<u-icon name="checkbox-mark" size="25" color="#FFF"></u-icon>
				</view>
				<text class="tip-text" v-if="orderData.status === -1">订单已失效</text>
				<text class="tip-text" v-else>{{ orderData.status === 3 ? '服务已完成' : '待服务' }}</text>
			</view>
			<!-- 预约失败的原因 -->
			<view class="cus-name" v-if="orderData.status === -1">{{ orderData.reason || '' }}</view>

			<block v-else>
				<view class="cus-name">客户姓名：{{ orderData.user_info.nick_name }}</view>
				<view class="address-box">
					<u-icon name="map" size="35" color="#D5D6DA"></u-icon>
					<view class="u-m-l-10">{{ orderData.user_info.addr }}</view>
				</view>
				<view class="month-time-box">
					<view>预计开始时间：{{ $u.utils.formatDate(orderData.start_time || '') }}</view>
					<!-- <view class="time-box">{{orderData.orderState.door_time}}</view> -->
				</view>
				<view class="button-box">
					<view class="btn-item" v-if="orderData.status === 2"><u-button :custom-style="btnStyle" :hairLine="false" @click="callPhoneClick">联系客户</u-button></view>
					<view class="btn-item" v-else-if="orderData.status === 3 && orderData.user_info.has_comment">
						<u-button :custom-style="btnStyle" :hairLine="false" @click="toEvaluateClick">查看评价</u-button>
					</view>
				</view>
			</block>
		</view>

		<!-- 律小二家 图标区域 -->
		<view class="back-box lawyer-home">律小二家</view>
		<!-- 返回按钮 -->
		<view class="back-box" @click="backBtnClick"><u-icon name="arrow-left" size="30" color="#333333"></u-icon></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 订单 id 从来源页传递过来的，用于查询该条数据
			order_id: '',
			// 页面渲染的用户数据
			orderData: {},
			btnStyle: {
				width: '286rpx',
				height: '92rpx',
				backgroundColor: '#00C9B1',
				color: '#FFF',
				borderRadius: '46rpx',
				border: 0,
				fontSize: '30rpx',
				fontFamily: 'Adobe Heiti Std',
				fontWeight: 'normal',
			}
		};
	},
	async onLoad(order) {
		this.order_id = order.id;
		await this.getData();
		if (this.orderData.status === -1) {
			uni.setNavigationBarTitle({
				title: '订单已失效'
			});
		} else if (this.orderData.status === 2) {
			uni.setNavigationBarTitle({
				title: '订单待服务'
			});
		} else if (this.orderData.status === 3) {
			uni.setNavigationBarTitle({
				title: '订单已完成'
			});
		} else {
			uni.setNavigationBarTitle({
				title: ''
			});
		}
	},
	methods: {
		async getData() {
			const res = await this.$u.api.getLawyerService({ id: this.order_id });
			if (!res) return;
			this.orderData = res;
		},
		// 返回区域的点击事件
		backBtnClick() {
			this.$u.route({
				type: 'back'
			});
		},
		// 联系客户
		callPhoneClick() {
			uni.makePhoneCall({
				phoneNumber: this.orderData.user_info.mobile
			})
		},
		// 查看评价
		toEvaluateClick() {
			// 跳转到客户评价页面
			this.$u.route('/myPackageA/pages/views/customer-evaluation')
		}
	}
};
</script>

<style lang="scss" scoped>
.ptp-detail-bg {
	width: 750rpx;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.ptp-detail-text-box {
	width: 675rpx;
	background: #ffffff;
	border-radius: 30rpx;
	margin: 0 auto;
	position: absolute;
	top: 45vh;
	left: 32rpx;
	z-index: 9;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 38rpx 43rpx;
	font-size: 30rpx;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	color: #929292;
}
.top-tip-box {
	margin-top: 30rpx;
	font-size: 48rpx;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	color: #333333;
	display: flex;
	align-items: center;
	.icon-box {
		width: 45rpx;
		height: 45rpx;
		display: flex;
		justify-content: center;
		align-content: center;
		border-radius: 50%;
		background-color: #fdb145;
		margin-right: 13rpx;
	}
	.tip-text {
		font-size: 48rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #333333;
	}
}
.cus-name {
	font-size: 36rpx;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	color: #020202;
	margin: 30rpx 2em;
}
.address-box {
	display: flex;
}
.month-time-box {
	display: flex;
	margin: 30rpx 0;
	font-size: 32rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #484848;
	.time-box {
		margin-left: 3em;
	}
}
.button-box {
	width: 100%;
	height: 80rpx;
	display: flex;
	justify-content: center;
	.btn-item {
		display: flex;
		justify-content: center;
	}
}
.right-btn {
	margin-left: 25rpx;
	background: linear-gradient(90deg, #ffa84b, #ff9428) !important;
}
.back-box {
	position: absolute;
	top: 64rpx;
	left: 10rpx;
	width: 60rpx;
	height: 60rpx;
	background-color: white;
	z-index: 9;
	border-radius: 50%;
	line-height: 60rpx;
	text-align: center;
}
.lawyer-home {
	width: 174rpx;
	height: 60rpx;
	background: #333333;
	border-radius: 60px 0 0 60px;
	left: 198rpx;
	font-size: 24rpx;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	color: #ffffff;
}
</style>
